import { Button } from 'antd';
import type React from 'react';
import {
  attachNewStation,
  detachNewStation,
  getNewStation,
} from '@/components/MapView/Mapless/mana/newstation';
import styles from '../../index.module.less';
import type { TestControlProps } from '../types';

const Index: React.FC<TestControlProps> = ({ maplessRef }) => {
  const onDrawStations1 = () => {
    const sMan1 = attachNewStation(maplessRef.current, 'nsm1');
    sMan1?.drawStations([
      {
        id: '1',
        name: '测试站点1',
        longitude: 113.264,
        latitude: 23.129,
        type: '',
        category: 'fixed',
        state: 'fault',
        selected: true,
      },
      {
        id: '2',
        name: '测试站点2',
        longitude: 113.273,
        latitude: 23.135,
        type: '',
        category: 'mobile',
        state: 'busy',
        azimuth: 270,
      },
      {
        id: '3',
        name: '测试站点3',
        longitude: 113.281,
        latitude: 23.124,
        type: '',
        category: 'fly',
      },
      {
        id: '4',
        name: '测试站点4',
        longitude: 113.259,
        latitude: 23.118,
        type: '',
        category: 'sensor',
        state: 'offline',
      },
    ]);
    sMan1?.on('stationsSelected', (e) => {
      console.log('stationsSelected', e);
    });
  };

  const onUpdateStation = () => {
    const sMan1 = getNewStation(maplessRef.current, 'nsm1');
    sMan1?.updateStations([
      {
        id: '1',
        name: '更新后的站点1',
        longitude: 113.265,
        latitude: 23.13,
        state: 'busy',
      },
      {
        id: '2',
        name: '测试站点2',
        longitude: 113.274,
        latitude: 23.136,
        azimuth: 60,
      },
    ]);
  };

  const onShowStation = () => {
    const sMan1 = getNewStation(maplessRef.current, 'nsm1');
    sMan1?.setVisible(!sMan1.IsVisible);
  };

  const onClearStations1 = () => {
    detachNewStation(maplessRef.current, 'nsm1');
  };

  return (
    <div className={styles.test}>
      <Button style={{ color: 'red' }} onClick={onDrawStations1}>
        绘制New站点列表
      </Button>
      <Button style={{ color: 'red' }} onClick={onUpdateStation}>
        更新New站点
      </Button>
      <Button style={{ color: 'red' }} onClick={onShowStation}>
        显示/隐藏
      </Button>
      <Button style={{ color: 'red' }} onClick={onClearStations1}>
        清除New站点列表
      </Button>
    </div>
  );
};

export default Index;
